<template>
  <el-dialog class="goods-pop-cart" :visible="visible" @close="onClose">
    <div class="flex-box">
      <img class="goods-pop-cart-img" :src="data.picture"/>
      <div class="flex-grow-1">
        <div class="goods-card-name ellipsis2">{{data.name}}</div>
        <div class="flex-box">
          <div class="goods-card-price">￥{{data.price}}</div>
          <del class="goods-card-origin-price color-script flex-grow-1">{{data.originPrice}}</del>
        </div>
      </div>
    </div>
    <div class="goods-pop-cart-line"/>
    <div class="goods-pop-cart-spec" v-for="spec in data.specs" :key="spec.id">
      <div class="goods-pop-cart-spec-name">{{spec.name}}</div>
      <div class="goods-pop-cart-spec-item" v-for="item in spec.items" :key="item.id">
        {{item.name}}
      </div>
    </div>
    <div class="goods-pop-cart-line"/>
    <div class="flex-box">
      <div class="goods-pop-cart-label flex-grow-1">数量</div>
      <div class="goods-pop-cart-label">
        库存数量：{{storeCount}}
      </div>
      <el-input-number :min="0" :max="storeCount" :step="1" :value="count" size="small" @change="handlerChagne"/>
    </div>
    <br/>
    <div class="goods-pop-cart-button">
      <svg-icon icon-class="cart"/>
      加入购物车
    </div>
    <br/>
  </el-dialog>
</template>
<script src="./component"/>
<style rel="stylesheet/scss" lang="scss" src='./style.scss'/>
